/* Clearfix!!! */
.listing .item:after,
.section:after,
.notification .aux:after,
.aux .button-wrapper:after,
.object-lead .button-wrapper:after,
.article.version:after,
.article.review:after,
.grouped_ratings li:after,
.bars:after,
.item:after,
.secondary > div:after,
.listing-header:after,
.review-form p:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

* {
    overflow-wrap: break-word;
}

/************************************/
/*             ELEMENTS             */
/************************************/
.section,
.notification .aux,
.aux .button-wrapper,
.object-lead .button-wrapper {
    overflow: visible;
}

li.usertag {
    overflow: hidden;
}

#main-wrapper {
    background: #fff url(../../img/zamboni/global/bg-header.png) repeat-x;
}

header {
    display: block;
}

header ol.breadcrumbs {
    margin-bottom: 0;
}

header hgroup h2 {
    margin-bottom: 0.3em;
    margin-top: 0.2em;
}

header hgroup h3 {
    margin-top: 0;
    color: #666;
    font-family: "helvetica neue", arial, helvetica, sans-serif;
    font-size: 16px;
    margin-bottom: 14px;
}

ul.errorlist {
    margin-bottom: 0;
    color: #c00;
    clear:both;
}

.html-ltr a.more-link:after {
    content: '\25B8';
    margin-left: .5em;
}
.html-rtl a.more-link:after {
    content: '\25C2';
    margin-right: .5em;
}

#publish_to {
    margin-bottom: .25em;
}

.highlight .more-info {
    float: none;
}

.highlight ul {
    margin-bottom: .5em;
}

.other-author-addons li .addonitem {
    padding-left: 20px;
    background-image: url(../../img/icons/icons.png);
    background-repeat: no-repeat;
    background-position: 0px -200px;
}

.html-rtl .other-author-addons li .addonitem {
    padding-right: 20px;
    padding-left: 0;
    background-position: 100% -200px;
}

.html-rtl.inverse .primary {
    float: right;
    clear: right;
}

.html-rtl.inverse .secondary {
    float: left;
    clear: left;
}

.html-rtl .object-lead .notification {
    clear: right;
}

.js-hidden {
    display: none;
}

.light {
    color: #888;
}

.light .light {
    color: #ccc;
}

.disabled,
.disabled a[href],
.disabled label,
.disabled h3 {
    color: #888 !important;
}

/* 'listing footer' */
.listing-footer,
.tab-wrapper .fm-control {
    background-color: #E0EFFD;
}

/************************************/
/*             GRADIENTS            */
/************************************/
/*  If you made a gradient, add it here.
 *  If you want to use an existing gradient, add your selector here.
**/

/* 'listing header' */
.listing-header {
    background-color: #E0EFFD;
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        from(#FFFFFF),
        to(#E0EFFD)
    );
    background: linear-gradient(#FFFFFF, #E0EFFD);
}

/* 'listing item' */
.object-lead,
.listing .item {
    background-color: #E0EFFD;
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        from(#FFFFFF),
        to(#F6FBFF)
    );
    background: linear-gradient(#FFFFFF, #F6FBFF);
}

/* 'Mozilla' */
#minimal-header a.mozilla,
.categories h2,
.categories h3,
div.header-search form,
#navbar li ul li:hover,
#navbar,
span.new  {
    background: #33589f;
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        from(rgb(42,65,135)),
        to(rgb(59,105,177))
    );
    background: linear-gradient(
        to top,
        rgb(42,65,135) 0%,
        rgb(59,105,177) 100%
    );
}

/***** END GRADIENTS *******/


/** Generic Button *********/
a.button:link,
a.button:visited,
button,
input[type=submit],
input[type=button] {
    font-weight: bold;
    color: #fff;
    background: #39f url("../../img/zamboni/button-blue.png") 0 50% repeat-x;
    background: linear-gradient(#7bf 40%, #39f 60%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #7bf), color-stop(60%, #39f));
    border: 1px solid #3d6db5;
    padding: 0 .95em;
    margin: 0;
    display: inline-block;
    line-height: 1.538;
    text-shadow: 0 -1px 0 #3d6db5;
    -moz-box-shadow: inset 0 0 1px rgba(255,255,255,0.1);
    -webkit-box-shadow: inset 0 0 1px rgba(255,255,255,0.1);
    box-shadow: inset 0 0 1px rgba(255,255,255,0.1);
    -moz-border-radius: .95em;
    -webkit-border-radius: .95em;
    border-radius: .95em;
}

button,
input[type=submit],
input[type=button] {
    padding: .2em .95em .3em;
    cursor: pointer;
}

.button span,
button span {
    border-left: 2px groove rgba(150,150,150,0.35);
    padding: .3em .5em .2em .65em;
    margin: 0 .25em 0 -.25em;
    display: inline-block;
    line-height: 1.2;
    white-space: normal;
}

.html-rtl .button span,
.html-rtl button span {
    border-left: 0;
    border-right: 2px groove rgba(150,150,150,0.35);
    padding: .3em .65em .2em .5em;
    margin: 0 -.25em 0 .25em;
}

.button.go span,
button.go span {
    border: 0;
    padding: .3em 0 .2em;
    margin: 0;
}

.button.concealed span {
    border-color: rgba(130,160,175,0.15);
}

a.button:hover,
a.button:focus,
button:hover,
button:focus,
input[type=submit]:hover,
input[type=button]:hover,
input[type=submit]:focus,
input[type=button]:focus {
    border-color: #03c;
    -moz-box-shadow: inset 0 0 2px rgba(255,255,255,1);
    -webkit-box-shadow: inset 0 0 2px rgba(255,255,255,1);
    box-shadow: inset 0 0 2px rgba(255,255,255,1);
}

a.button:active, button.button:active {
    border-color: #03c;
    background-image: url("../../img/zamboni/button-blue-on.png");
    background: linear-gradient(#39f 40%, #6fb7ff 60%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #39f), color-stop(60%, #6fb7ff));
    -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.5);
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.5);
    box-shadow: inset 0 0 2px rgba(0,0,0,.5);
}

.cta a.button:link,
.cta a.button:visited {
    background: #5af;
    background: linear-gradient(#acf, #5af);
    background: -webkit-gradient(linear, left top, left bottom, from(#acf), to(#5af));
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    display: block;
    line-height: 1.0;
    white-space: normal;
    padding: 0.75em 0.95em;
    text-align: center;
}
.cta a.button:hover,
.cta a.button:focus {
    border-color: #25f;
    -moz-box-shadow: inset 0 0 2px #fff;
    -webkit-box-shadow: inset 0 0 2px #fff;
    box-shadow: inset 0 0 2px #fff;
}
.cta a.button:active {
    border-color: #03c;
    background: #7bf;
    background: linear-gradient(#5af, #7bf);
    background: -webkit-gradient(linear, left top, left bottom, from(#5af), to(#7bf));
    -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
}

/* larger buttons for emphasis */
a.button.prominent:link,
a.button.prominent:visited,
a.button.prominent:hover,
a.button.prominent:focus,
a.button.prominent:active,
button.prominent,
input[type=button].prominent,
input[type=submit].prominent {
    font-size: 1.2em;
}

/* Some buttons look like links */
button.link {
    background: transparent none;
    text-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
    font-weight: bold;
    color: #3d6db5;
}

.cta a.button.disabled,
a.button.disabled,
a.button[disabled],
button.button:disabled,
input[type=submit]:disabled,
input[type=button]:disabled {
    background: #a6a6a6;
    border-color: #666;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: 0 -1px 0 #666;
}


button.link:hover,
button.link:focus {
    color: #003595;
    text-decoration: underline;
}

/** =Green buttons: Add, Download, Mobile *********/
a.button.add:link,
a.button.add:visited,
button.add,
input[type=submit].add,
input[type=button].add,
a.button.download:link,
a.button.download:visited,
button.download,
input[type=submit].download,
input[type=button].download,
a.button.mobile:link,
a.button.mobile:visited,
button.mobile,
input[type=button].mobile,
input[type=submit].mobile {
    background: #55a802 url("../../img/zamboni/button-green.png") 0 50% repeat-x;
    background: linear-gradient(#93c85e 30%, #55a802 55%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #93c85e), color-stop(55%, #55a802));
    border-color: #3a7404;
    text-shadow: 0 -1px 0 #3a7404;
}

a.button.add:hover,
a.button.add:focus,
button.add:hover,
button.add:focus,
input[type=submit].add:hover,
input[type=button].add:hover,
input[type=submit].add:focus,
input[type=button].add:focus {
    border-color: #1a5404;
}

a.button.add:active,
a.button.download:active {
    border-color: #1a5404;
    background-image: url("../../img/zamboni/button-green-on.png");
    background: linear-gradient(#55a802 40%, #83c046 65%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #55a802), color-stop(65%, #83c046));
}

/** Temporary diagnostic styles to weed out redundant button classes *********/
a.button.significant,
button.significant,
input[type=submit].significant,
input[type=button].significant,
a.button.positive,
button.positive,
input[type=submit].positive,
input[type=button].positive,
a.button.negative,
button.negative,
input[type=submit].negative,
input[type=button].negative,
a.button.neutral,
button.neutral,
input[type=submit].neutral,
input[type=button].neutral,
a.button.cool,
button.cool,
input[type=submit].cool,
input[type=button].cool {
    outline: 3px dotted red;
}
/** end of diagnostic styles **/

/** Navigational Button *********/
a.button.go:link,
a.button.go:visited,
button.go,
input[type=submit].go,
input[type=button].go {
    color: #3d6db5;
    background: #fff none;
    border-color: #E0EFFD;
    text-shadow: 0 1px 0 #fff;
    -moz-box-shadow: inset 0 0 3px #c0e1ee;
    -webkit-box-shadow: inset 0 0 3px #c0e1ee;
}

a.button.go:hover,
a.button.go:focus,
button.go:hover,
button.go:focus,
input[type=submit].go:hover,
input[type=button].go:hover,
input[type=submit].go:focus,
input[type=button].go:focus {
    color: #3d6db5;
    border-color: #a8cedd;
}

a.button.go:active {
    border-color: #95b9c5;
    background-image: none;
    -moz-box-shadow: inset 0 0 5px #ccc;
    -webkit-box-shadow: inset 0 0 5px #ccc;
}


/** Cautionary Button *********/
a.button.caution:link,
a.button.caution:visited,
button.caution,
input[type=submit].caution,
input[type=button].caution {
    color: #333;
    background: #fc0 url("../../img/zamboni/button-caution.png") 0 50% repeat-x;
    background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%),
    -moz-repeating-linear-gradient(-45deg, #F0B500, #F0B500 7px, #FFD000 7px, #FFD000 14px);
    border-color: #a70;
    text-shadow: 0 1px 0 #ffe56b;
}

a.button.caution.concealed:link,
a.button.caution.concealed:visited,
button.caution.concealed,
input[type=submit].caution.concealed,
input[type=button].caution.concealed {
    color: #859fae;
    border-color: #a70;
    background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6) 60%),
    -moz-repeating-linear-gradient(-45deg, #F0B500, #F0B500 7px, #FFD000 7px, #FFD000 14px);
    white-space: normal;
}

a.button.caution:hover,
a.button.caution:focus,
button.caution:hover,
button.caution:focus,
input[type=submit].caution:hover,
input[type=button].caution:hover,
input[type=submit].caution:focus,
input[type=button].caution:focus {
    border-color: #850;
}

a.button.caution:active {
    border-color: #850;
    background-image: url("../../img/zamboni/button-caution-on.png");
    background: linear-gradient(rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.3) 60%),
    -moz-repeating-linear-gradient(45deg, #F0B500, #F0B500 7px, #FFD000 7px, #FFD000 14px);
    -moz-box-shadow: inset 0 0 5px rgba(0,0,0,.5);
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.5);
}

/** Status Button *********/
a.button.status:link,
a.button.status:visited,
button.status,
input[type=submit].status,
input[type=button].status {
    color: #333;
    background: #fff none;
    border-color: #E0EFFD;
    text-shadow: 0 1px 0 #fff;
    -moz-box-shadow: inset 0 0 3px #c0e1ee;
    -webkit-box-shadow: inset 0 0 3px #c0e1ee;
}

a.button.status:hover,
a.button.status:focus,
button.status:hover,
button.status:focus,
input[type=submit].status:hover,
input[type=button].status:hover,
input[type=submit].status:focus,
input[type=button].status:focus {
    color: #333;
    border-color: #a8cedd;
}

a.button.status:active {
    border-color: #95b9c5;
    background-image: none;
    -moz-box-shadow: inset 0 0 8px #a4cee2;
    -webkit-box-shadow: inset 0 0 8px #a4cee2;
}

/** Concealed Button *********/
a.button.concealed:link,
a.button.concealed:visited,
button.concealed,
input[type=submit].concealed,
input[type=button].concealed {
    color: #859fae;
    background: #fff none;
    border-color: #E0EFFD;
    text-shadow: 0 1px 0 #fff;
    -moz-box-shadow: inset 0 0 3px #c0e1ee;
    -webkit-box-shadow: inset 0 0 3px #c0e1ee;
}

a.button.concealed:hover,
a.button.concealed:focus,
button.concealed:hover,
button.concealed:focus,
input[type=submit].concealed:hover,
input[type=button].concealed:hover,
input[type=submit].concealed:focus,
input[type=button].concealed:focus {
    color: #657f8e;
    border-color: #a8cedd;
}

a.button.concealed:active {
    border-color: #95b9c5;
    background-image: none;
    -moz-box-shadow: inset 0 0 8px #a4cee2;
    -webkit-box-shadow: inset 0 0 8px #a4cee2;
}


/** =Install Button *********/
.item .install-shell .install {
    float: left; /* Only in zamboni. */
}

.install-shell .extra {
    font-size: .85em;
    font-weight: bold;
    clear: both;
}

.install-shell .notavail {
    padding: 1px 0 1px 20px;
    margin-left: 3px;  /* Match the padding of .install. */
    background: url(../../img/zamboni/icons/no-14x14.png) 0 30% no-repeat;
    white-space: nowrap;
}

.html-rtl .install-shell .notavail {
    padding: 1px 20px 1px 0;
    background-position: 100% 30%;
}

.item .install,
.install-shell .install {
    text-align: inherit;
    margin: 0 0 .5em;
}

.item .install strong,
.install strong {
    font-weight: bold;
    text-shadow: none;
    margin: 0 4px;
    font-size: 0.85em;
    display: block;
}

.teaser-items .item .install strong {
    margin: 0 4px;
}

.install.featuredaddon,
.install.lite,
.install.unreviewed {
    padding: 2px;
    -moz-border-radius: .95em .95em .95em 0;
    -webkit-border-radius: .95em;
    -webkit-border-bottom-left-radius: 0;
    border-radius: .95em .95em .95em 0;
}

.html-rtl .install.featuredaddon,
.html-rtl .install.lite,
.html-rtl .install.unreviewed {
    -moz-border-radius: .95em .95em 0 .95em;
    -webkit-border-radius: .95em;
    -webkit-border-bottom-left-radius: .95em;
    -webkit-border-bottom-right-radius: 0;
    border-radius: .95em .95em 0 .95em;
}

.install.featuredaddon {
    background: #bcdba2;
}
.install.featuredaddon strong {
    color: #360;
}

.install.lite,
.install.unreviewed {
    background: #ffe57f;
}
.install.lite strong,
.install.unreviewed strong {
    color: #333;
}

/** =Button =icons *********/
.button.add b,
.button.download b,
.button.mobile b,
.button.contribute b,
.button.status.ok b {
    padding: .3em 1em .2em .85em;
    margin: 0 0 0 -.5em;
    width: 16px;
    background: transparent url("../../img/zamboni/icons/button-icons.png") 25% 0 no-repeat;
}

.button.add b { background-position: 25% 0; }
.button.add.prominent b {
    background-position: 25% -49px;
    position: relative;
    right: 1px;
    top: 2px;
}
.button.download b { background-position: 25% -100px; }
.button.download.prominent b { background-position: 25% -150px; }
.button.add.caution b { background-position: 25% -400px; }
.button.add.caution.prominent b { background-position: 25% -450px; }
.button.download.caution b { background-position: 25% -500px; }
.button.download.caution.prominent b { background-position: 25% -550px; }
.button.add.concealed b { background-position: 25% -200px; }
.button.add.concealed.prominent b { background-position: 25% -250px; }
.button.download.concealed b { background-position: 25% -300px; }
.button.download.concealed.prominent b { background-position: 25% -350px; }
.button.mobile b { background-position: 25% -600px; }
.button.mobile.prominent b { background-position: 25% -650px; }
.button.mobile.caution b { background-position: 25% -700px; }
.button.mobile.caution.prominent b { background-position: 25% -750px; }
.button.contribute b { background-position: 25% -800px; }
.button.contribute.prominent b { background-position: 25% -850px; }
.button.status.ok b { background-position: 25% -900px; }

.html-rtl .button b,
.html-rtl button b {
    padding: .3em 1em .2em .65em;
    margin: 0 -.5em 0 .25em;
}

/* For other platforms */
.install-button .button span.os {
    padding: 0;
    margin: 0;
    border: 0;
    font-weight: normal;
    display: inline;
    white-space: nowrap;
}

.install-button .button.platform {
    display: none;
}

.mac .button.mac,
.linux .button.linux,
.other .button.bsd,
.other .button.solaris,
.windows .button.windows {
    display: inherit;
}

th, td {
    text-align: left;
    padding: 0.308em 0.537em 0.214em 0.231em; /* 4px 7px 3px 7px */
}

.record-container {
    display: flex;
    justify-content: space-between;
    gap: 2em;
}

div:has(> .download-reply-attachment) {
    display: flex;
    flex-direction: column;
    text-align: right;
}

/** Button =Popups *********/
.install {
    position: relative;
    padding: 2px 3px 3px;
}

.popup-shim {
    position: relative;
}
div.popup-shim {
    display: inline-block;
}

.popup p:last-child,
.popup ul:last-child {
    margin-bottom: 0;
}

.install-note .msg,
.popup .msg,
.app {
    background-repeat: no-repeat;
    min-height: 32px;
}

.mobile .install-note .msg, .mobile.app,
.firefox .install-note .msg, .firefox.app { background-image: url(../../img/app-icons/small/firefox.png); }
.thunderbird .install-note .msg, .thunderbird.app { background-image: url(../../img/app-icons/small/thunderbird.png); }
.sunbird .install-note .msg, .sunbird.app { background-image: url(../../img/app-icons/small/sunbird.png); }
.seamonkey .install-note .msg, .seamonkey.app { background-image: url(../../img/app-icons/small/seamonkey.png); }
.android .install-note .msg, .android.app { background-image: url(../../img/app-icons/small/android.png); }
.mz.app { background-image: url(../../img/app-icons/small/mozilla.png); }

.install-note .msg.m-unreviewed,
.popup.warning .msg {
    background-image: url(../../img/zamboni/icons/alert-32x32.png);
}

.install-note .msg.m-platforms {
    background-image: url(../../img/zamboni/icons/no-32x32.png);
}

.install-note,
.popup,
.modal {
    position: absolute;
    left: -15px;
    margin-top: 5px;
    background: #fff;
    padding: 10px;
    border: 3px solid #2e5186;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    z-index: 2001; /* because of devhub title */
}

.popup:empty{
    display: none;
}

.modal form {
    margin: 0;
}
.modal h2,
.modal h3 {
    margin-top: 0;
    color: #2e5186;
}
.modal-delete h3 {
    color: #6c1a1a;
}
.install-note {
    width: 300px;
}
/* append the left class if the bubble is to the far right */
.install-note.left,
.popup.left {
    left: -160px;
}

.unreviewed .install-note,
.popup.warning {
    border-color: #c90;
}

.popup.error,
.modal-delete {
    border-color: #6c1a1a;
    color: #333;
}

.modal-overlay {
    background-color: #fff;
    height: 100%;
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
}

.install a * {
   pointer-events: none;
}

/* http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html */
/* Creates the larger triangle. */
.install-note:before,
.popup:before {
    content: "\00a0";
    display: block; /* reduce the damage in FF3.0 */
    position: absolute;
    width: 0;
    height: 0;
    left: 50px;
    top: -20px; /* value = - border-top-width - border-bottom-width */
    border: 10px solid transparent;
    border-bottom-color: #2e5186;
    pointer-events: none;
}

.unreviewed .install-note:before,
.popup.warning:before {
    border-bottom-color: #c90;
}

.popup.error:before {
    border-bottom-color: #6c1a1a;
}

/* creates the smaller triangle */
.install-note:after,
.popup:after {
    content: "\00a0";
    display: block; /* reduce the damage in FF3.0 */
    position: absolute;
    left: 55px;
    width: 0;
    height: 0;
    top: -10px; /* value = - border-top-width - border-bottom-width */
    border: 5px solid transparent;
    border-bottom-color: #fff;
    pointer-events: none;
}

.install-note.left:before,
.popup.left:before {
    right: 71px; /* controls horizontal position */
    left: auto;
}

.install-note.left:after,
.popup.left:after {
    right: 76px; /* value = (:before right) + (:before border-right) - (:after border-right) */
    left: auto;
}

.install .install-note > *,
.popup.warning > * {
    margin-bottom: 1em;
    padding-left: 50px;
}

.install .install-note strong,
.popup strong {
    margin: 0;
    color: inherit;
    font-size: inherit;
}

/** hover tooltip styles **/
#tooltip {
    display:none;
    background: #2A4364;
    color: white;
    font-size: 11px;
    border: 1px solid #fff;
    -moz-border-radius: .8em;
    -webkit-border-radius: .8em;
    max-width: 300px;
    text-align: center;
    position: absolute;
    padding: 0.5em 1em;
    pointer-events: none;
    z-index: 16389;
}

#tooltip.error {
    background: #6C1a1a;
}

#tooltip span {
    display: block;
    line-height: 1.2em;
}

#tooltip:before {
    content: "\00a0";
    display: block; /* reduce the damage in FF3.0 */
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -6px;
    left: 50%;
    bottom: -16px;
    border: solid transparent;
    border-width: 8px 6px;
    border-top-color: #2A4364;
    pointer-events: none;
}
#tooltip.error:before {
    border-top-color: #6c1a1a;
}


/** =Search =Suggestions *********/

#search-suggest {
    background: #fff;
    border: 1px solid #011234;
    width: 38%;
    padding: .5em 0;
    position: absolute;
    left: 1.4%;
    z-index: 99;
    display: none;
}

.html-rtl #search-suggest {
    left: auto;
    right: 1.4%;
}

#search-suggest .all {
    margin: .5em 10px 0;
    font-weight: bold;
    font-size: 12px;
}

#search-suggest ul {
    margin: 0;
}

#search-suggest li a {
    display: block;
    padding: 2px 2px 2px 32px;
    font-weight: bold;
    font-size: .875em;
    color: #444;
    text-decoration: none;
    background: transparent;
}

.html-rtl #search-suggest li a {
    padding: 2px 32px 2px 2px;
}

#search-suggest li a:hover,
#search-suggest li a:focus,
#search-suggest li a:active {
    background-color: #ecf7fb;
    text-decoration: none;
}

/** Code Licenses *********/
ul.license li {
    display: block;
    float: left;
    list-style: none;
}
.html-rtl ul.license li {
    float: right;
}
ul.license li.text {
    font-size: 90%;
    margin-top: -.2em;
}
.html-ltr ul.license li.text {
    margin-left: .3em;
}
.html-rtl ul.license li.text {
    margin-right: .3em;
}
ul.license li.icon {
    background: url(../../img/zamboni/licenses.png) no-repeat top left;
    height: 15px;
    width: 15px;
}
ul.license li.cc-attrib { background-position: 0 0; }
ul.license li.cc-noderiv { background-position: 0 -65px; }
ul.license li.cc-noncom { background-position: 0 -130px; }
ul.license li.cc-share { background-position: 0 -195px; }
ul.license li.copyr { background-position: 0 -260px; }

/************************************/
/*               PAGES              */
/************************************/

#search-suggest li.ext a { background-position: 7px 2px; }
#search-suggest li.col a { background-position: 7px -98px; }
#search-suggest li.cat a { background-position: 7px -196px; }
.html-rtl #search-suggest li.ext a { background-position: 98% 2px; }
.html-rtl #search-suggest li.col a { background-position: 98% -98px; }
.html-rtl #search-suggest li.cat a { background-position: 98% -196px; }


#search-suggest em {
    font-weight: normal;
    font-style: normal;
    color: #999;
    margin: 0 8px;
}

/** =Form Elements *********/
fieldset {
    margin: 1em 0 1.5em;
    border: 0;
    padding: .25em 0 1em;
    clear: both;
    border-bottom: 1px dotted #a4cfde;
}

form fieldset:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: .5em;
}

fieldset legend { /* based on h3 */
    font: normal 1.385em/1.1 georgia, serif;
    color: #011234;
    margin: 0.75em 0 0;
}

.user-input h3 {
    margin: 0 0 .5em;
}

fieldset ol,
fieldset ul,
.html-rtl fieldset ol,
.html-rtl fieldset ul {
    list-style: none;
    margin: 0;
}

fieldset li {
    margin-bottom: .5em;
}

.user-input label {
    display: block;
    width: 320px;
}

.user-input .check label {
    width: auto;
    display: inline;
}

input[type="text"],
input[type="url"],
input[type="password"],
select,
textarea {
    padding: 2px 5px;
    border: 1px solid #5875a0;
    color: #666;
}

select {
  padding: 2px 0 2px 5px;
}

.html-rtl select {
  padding: 2px 5px 2px 0;
}

input[type="text"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    color: #444;
}

select:disabled {
    color: #999;
}

.user-input input[type="text"],
.user-input input[type="password"] {
    width: 310px;
}

.user-input select {
    width: 322px;
}

.user-input textarea {
/*    width: 98%;*/
}

.user-input .instruct {
    width: 70%;
    margin-bottom: .75em;
}

form .note {
    font-size: 0.846em; /* 11px */
    line-height: 1.4;
    color: #666;
}

form label .note {
    font-weight: normal;
    display: block;
    margin-bottom: .5em;
}

.req {
    color: #d52f2f;
    font-weight: bold;
}

fieldset.inline {
    margin: 1em 0 0;
    padding: 0;
    position: relative;
}

fieldset.inline legend {
    font-size: 1.077em; /* 14px */
}

fieldset.inline ol,
fieldset.inline ul {
    margin-bottom: .5em;
}

fieldset.inline li {
    display: inline;
    margin-right: 10px;
}

fieldset.inline label {
    display: inline;
    margin-right: 5px;
}

fieldset.inline input[type="text"],
fieldset.inline input[type="password"],
fieldset.inline select {
    width: auto;
}

form .error {
    margin-bottom: 1em;
}

form .error .error,
form .error .errorlist,
form .error .errorlist li {
    margin-bottom: 0;
}

form .error input[type="text"],
form .error input[type="url"],
form .error input[type="password"],
form .error select,
form .error textarea {
    border-color: #c00;
    border-width: 2px;
}

form .error .note {
    color: inherit;
}

form .error .note.error {
    color: inherit;
    font-size: inherit;
    display: block;
}

/************************************/
/*               PAGES              */
/************************************/

/** =User =Edit *********/
#user-profile ol {
    padding-right: 280px;
    min-height: 310px;
    margin: 0;
    position: relative;
}

.html-rtl #user-profile ol {
    padding: 0 0 0 280px;
}

#acct-account label[for="account_hideemail"] {
    font-weight: normal;
    color: #666;
}

#user-profile input[type="text"] {
    width: 90%;
    max-width: 310px;
}

#user-profile .profile-photo {
    width: 220px;
    position: absolute;
    right: 10%;
    top: 0;
    margin-left: 55%;
}

.html-rtl #user-profile .profile-photo {
    left: 10%;
    right: auto;
    margin-left: 0;
    margin-right: 55%;
}

#user-profile .profile-photo label {
    width: auto;
}

#user-profile .avatar {
    border: 3px solid #e0effd;
    padding: 0;
    margin-top: 1em;
}

#user-profile .trans {
    width: 100%;
    -moz-box-sizing: border-box;
}

.html-rtl #user-edit #acct-notify {
    padding: 0 0 0 35%;
}

#user-edit #acct-delete {
    margin: .25em 0;
    float: right;
}

.html-rtl #user-edit #acct-delete {
    float: left;
}

#acct-delete a {
    color: #c00;
}

/** =User =Profile *********/
.object-lead table {
    margin: 0 0 1em;
}

.object-lead table tr th {
    width: 180px;
}

.object-content .prose {
    margin: 0 0 1em;
}

.object-content .editprofile {
    border-top: 1px dotted #a5c9d5;
    margin: .25em 0 0;
    padding-top: .25em;
}

.object-content .editprofile a {
    background: transparent url("../../img/icons/news-feed-sprite.png") 0 -538px no-repeat;
    font-weight: bold;
    font-size: .923em;
    margin-right: 1em;
    padding: .25em 0 .25em 22px;
}

.html-rtl .object-content .editprofile a {
    background-position: 100% -538px;
    padding: .25em 22px .25em 0;
    margin-right: 0;
    margin-left: 1em;
}

/** =Category Landing *********/
.category-landing [role="main"] {
    width: 73.47%;
}

#featured-addons {
    width: auto;
}

#featured-addons ul {
    width: 96.7%;
    padding-left: 3.3%;
}

.html-rtl #featured-addons ul {
    padding-left: 0;
}

#featured-addons li.addon {
    width: 30%;
    padding: 0;
    margin: 0 3.33% 0 0;
    overflow: visible;
    float: left;
}

#featured-addons ul li.addon:last-child {
    margin-right: 0;
}

#featured-addons .featured-inner {
    padding: 10px;
    background: #fff;
    background: linear-gradient(#fff, #e4f5fb);
}

#featured-addons h3 {
    margin-top: 0;
}

#featured-addons h3 a {
    color: inherit;
}

.html-rtl #featured-addons li.addon {
    float: right;
    clear: none;
    margin: 0 0 0 3.33%
}

#featured-addons .addon:last-child {
    margin-right: 0;
}

.html-rtl #featured-addons .addon:last-child {
    margin-left: 0;
    margin-right: 3.33%;
}

#featured-addons .preview {
    margin-bottom: .5em;
    position: relative;
    left: -3px;
    overflow: hidden;
}

.html-rtl #featured-addons .preview {
    left: 3px;
    right: -3px;
}

#featured-addons .preview a {
    border: 3px solid #e0effd;
    display: block;
    max-width: 200px;
    height: 155px;
    overflow: hidden;
}

#featured-addons .preview a:hover,
#featured-addons .preview a:focus,
#featured-addons .preview a:active {
    border-color: #aedff3;
}

#featured-addons .addon-desc {
    margin-bottom: .75em;
    text-overflow: ellipsis;
    min-height: 5em;
}

#featured-addons .addon-rating {
    clear: both;
    float: left;
    margin-bottom: 1em;
}

.html-rtl #featured-addons .addon-rating {
    clear: both;
    float: right;
    margin-bottom: 1em;
}

#featured-addons .install-shell {
    display:block;
}

#featured-addons .item .install {
    float: left;
    clear: both;
    margin: .5em 0;
}

.html-rtl #featured-addons .item .install {
    float: right;
}

.category-landing .addons-column {
    float: left;
    width: 32%;
    border: 0;
    padding: 0;
    margin-right: 14px;
}

.html-rtl .category-landing .addons-column {
    float: right;
    padding: 0;
    margin-left: 14px;
    margin-right: 0;
}

.category-landing .addons-column.last {
    margin-right: 0;
}

.html-rtl .category-landing .addons-column.last {
    margin-right: 14px;
    margin-left: 0;
}

.category-landing .addons-column h3 {
    background: transparent none;
    color: inherit;
    font-family: georgia, serif;
    margin: 0 2px .5em;
}

.category-landing .addons-column h3 a:link,
.category-landing .addons-column h3 a:visited {
    color: inherit;
}

.category-landing .addons-column h3 a:hover,
.category-landing .addons-column h3 a:focus,
.category-landing .addons-column h3 a:active {
    color: inherit;
    text-decoration: underline;
}

.category-landing .addons-column ul, .category-landing .info-message {
    border: 1px solid #E0EFFD;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 0;
    margin: 0;
}
.category-landing .info-message {
    clear: both;
    padding: 1em;
}

.category-landing .info-message .view-all {
    padding: 0;
    font-weight: normal;
    margin-bottom: 0;
    width: 80%;
}

.category-landing .info-message h3 {
    margin: 0;
    color: #444;
}
.category-landing .info-message .view-all a {
    font-weight: bold;
}

.category-landing .addons-column ul li {
    border-top: 1px dotted #E0EFFD;
    overflow: hidden;
    padding: 0;
    position: relative;
}

.html-rtl.category-landing .addons-column ul li {
    overflow: visible;
}

.category-landing .addons-column ul li a {
    min-height: 50px;
    height: auto;
    display: block;
    position: relative;
    text-decoration: none;
    padding: 0 5px 0 50px;
}

.html-rtl.category-landing .addons-column ul li a {
    padding: 0 50px 0 5px;
}

.category-landing .addons-column ul li a:hover,
.category-landing .addons-column ul li a:focus {
    background-color: #e4f5fb;
}

.category-landing .addons-column ul li a .name {
    font-size: 1em;
    font-weight: bold;
    color: #3d6db5;
    padding: 8px 0 0;
    margin-left: 0;
    display: block;
    height: 1.25em;
    line-height: 1.25em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-landing .addons-column ul li a:hover .name,
.category-landing .addons-column ul li a:focus .name,
.category-landing .addons-column ul li a:active .name {
    color: #003595;
    text-decoration: underline;
}

.category-landing .addons-column ul li a .meta {
    margin-left: 0;
    position: static;
    color: #777;
    display: block;
    font-size: 93%;
}

.category-landing .addons-column ul li a img.icon {
    left: 5px;
    top: 6px;
    position: absolute;
}

.html-rtl.category-landing .addons-column ul li a img.icon {
    left: auto;
    right: 5px;
}

.category-landing .view-all {
    background: transparent none;
    margin-top: .75em;
    font-weight: bold;
    padding: 2px 0 2px 9px;
}

.category-landing .view-all a:link,
.category-landing .view-all a:visited {
    font-size: 1em;
    color: #3d6db5;
    padding-right: 10px;
    background: transparent url(../../img/zamboni/icons/arrow-right-blue.png) 100% 55% no-repeat;
}

.html-rtl.category-landing .view-all a:link,
.html-rtl.category-landing .view-all a:visited {
    background: transparent url(../../img/zamboni/icons/arrow-left-blue.png) 0 55% no-repeat;
    padding: 0 0 0 10px;
}

.category-landing .view-all a:hover,
.category-landing .view-all a:active {
    color: #003595;
}

.html-rtl .category-landing .featured .view-all {
    text-align: left;
}

/** =Search results *********/
.results {
    border: 4px solid #E0EFFD;
    background-color: #E0EFFD;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 2em;
    clear: both;
}
.results-inner {
    background-color: #fff;
    border: 1px solid #2e5186;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    overflow: visible;
}

.listing-header .item-sort {
    margin-right: 5px;
}

.listing-header .item-sort button {
    position: absolute;
    left: -999em;
}

.html-rtl .listing-header .item-sort button {
    left: auto;
    right: -999em;
}

.results .featured {
    border-width: 0 0 1px;
    background-color: transparent;
    margin-bottom: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.result-count {
    padding: 0 10px;
    font-size: 1.231em;
}

.listing .contribute,
.separated-listing .contribute,
.collector-note {
    background: #E0EFFD;
    float: left;
    padding: 3px 10px;
    margin-top: 0.5em;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 95%;
}

.html-rtl .listing .contribute,
.html-rtl .separated-listing .contribute,
.html-rtl .collector-note {
    float: right;
}

.listing .contribute a {
    font-weight: bold;
}

.html-rtl .listing .contribute {
    float: right;
}

.listing .item {
    overflow: visible;
}

.item .install,
.results .item .install {
    float: left;
    clear: both;
    min-height: 2.75em;
    margin-left: -3px;
}

.html-rtl .item .install {
    float: right;
    margin-right: -3px;
    margin-left: 0;
}

.item .install-button {
    margin-bottom: .25em;
}

.item-info .notavail,
.item-info .addon-rating,
.item-info .downloads,
.item-info .updated {
    font-size: .923em; /* 12px */
    padding-top: 1px;
    margin: 0;
    clear: both;
}

.html-rtl .item-info .notavail,
.html-rtl .item-info .addon-rating,
.html-rtl .item-info .downloads,
.html-rtl .item-info .updated {
    margin: 0;
}

.listing .item blockquote {
    clear: left;
    overflow-x: hidden;
}

.html-rtl .listing .item blockquote {
    clear: right;
    padding-right: 0;
    padding-left: 16em;
}

.listing .item blockquote img {
    max-width: 100%;
}

.results-head {
    position: relative;
    width: auto;
}

.html-rtl .results-head {
    padding-right: 0;
}

.results-head .suggest {
    padding-left: 10px;
    font-size: .923em;
    line-height: 1.4;
    position: absolute;
    width: 280px;
    padding: 6px 8px 6px 28px;
    background: #ffc url("../../img/zamboni/icons/suggest-help.png") 6px .5em no-repeat;
    border: 1px solid #fc6;
    -moz-box-shadow: 2px 2px 0 #E0EFFD;
    -webkit-box-shadow: 2px 2px 0 #E0EFFD;
    box-shadow: 2px 2px 0 #E0EFFD;
    top: 0;
    right: 0;
}


.results-head .suggest a {
    font-weight: bold;
}

.results-head .suggest strong {
    display: block;
}

.results-head .suggest .point {
    position: relative;
    left: -28px;
    margin-bottom: -19px;
    display: block;
    padding: 0 0 20px 28px;
    background: transparent url("../../img/zamboni/suggest-point.png") 8px bottom no-repeat;
}

.html-rtl .results-head .suggest {
    padding: 6px 28px 6px 8px;
    background-position: 292px .5em;
}

.html-rtl .results-head .suggest .point {
    left: auto;
    right: -28px;
    padding: 0 28px 20px 0;
    background-image: url("../../img/zamboni/suggest-point-rtl.png");
    background-position: 255px bottom;
}

.other-categories,
#refine-results,
.versions .primary > .warning {
    background: #fff;
    border: 1px solid #e0effd;
}

.other-categories a {
    display: block;
}

.versions .primary > .warning h2 {
    font-style: italic;
    margin: 0;
}

.versions .primary > .warning {
    border-color: #C63717;
}

.versions .primary > .warning p {
    margin-top: .5em;
}

.version nav.further-navigation {
    display: block;
    padding-top: .5em;
    margin-top: 1em;
    clear: right;
    border-top: 1px dotted #E0EFFD;
}

.version a.source-code {
    display: inline-block;
    margin-top: 1em;
    padding-left: 20px;
}

.version a.more-info {
    float:right;
    margin: 0;
}

.item.version {
    padding: 2em;
}

.version .item-info {
    margin-right: 0;
    width: auto;
}

.item.version h5 {
    font-size: 1em;
}

.article.version {
    overflow: visible;
}

.article.version blockquote {
    clear: left;
    overflow-x: hidden;
}

.article.version h3 {
    font-family: "helvetica neue",arial,helvetica,sans-serif;
    font-size:1em;
    float: left;
    margin-top:0;
}

.article.version h3 span:before {
    content: '\02013\00a0';
}

#refine-results h5 {
    color: #235;
}

#refine-results div:last-child ul.refinements {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

/** =Report abuse form *********/
.abuse {
    border: 0;
    padding: 1em 0 0;
}

.abuse ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.abuse-wrapper legend {
    float: right;
}

.abuse-wrapper ol {
    padding-top: 3em;
}

.abuse label {
    font-weight: normal;
}

.abuse legend {
    font-family: inherit;
    font-size: inherit;
    font-weight: bold;
}

.abuse ol.hidden {
    display: none;
}

.abuse legend a.abuse-image {
    padding-left: 25px;
    color: #3d6db5;
    background: transparent url("../../img/zamboni/notifications.png") 0 -305px no-repeat;
}

.html-rtl .abuse legend span {
    padding-left: 0;
    padding-right: 25px;
    background-position: 100% -1700px;
}

/* TODO(jbalogh): remove hasJS when we add the abuse pane. */
.hasJS .abuse legend span {
    cursor: pointer;
}

.hasJS .abuse legend span:hover {
    text-decoration: underline;
}

.abuse textarea {
    border: 1px solid #5875A0;
    width: 60%;
}

/** White category list **/
.other-categories ul {
    margin: 0;
}

.other-categories .divider {
    border-top: 1px dotted #94BFCE;
    margin-top: 1em;
    padding-top: 1em;
}

.other-categories ul li {
    padding: 0 1em;
    font-size: 1.05em;
}

.other-categories.highlight ul:first-of-type {
    margin-bottom: 15px;
}

#search-tools-sidebar h3 {
    margin-bottom: 0.55em;
}

#search-tools-sidebar h4 {
    margin-top: 0;
    margin-bottom: 0.55em;
    font-style: italic;
    font-family: georgia, serif;
    font-size: 1.0em;
    font-weight: normal;
    color: #565656;
}

/** Notifications **/
.notification-box {
    margin: 10px 0 28px;
    border: 3px solid #1d4900;
    background-color: #e0effd;
    padding: 13px 13px 13px 58px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    font-family: "helvetica neue", arial, helvetica, sans-serif;
    color: #444;
    font-size: 13px;
    position: relative;
}

.notification-box h2 {
    margin: 0;
    padding-top: 10px;
    font-size: 130%;
    line-height: 1.5em;
    min-height: 38px;
    color: #444444;
}

.notification-box p {
     padding-top: 8px;
}

.notification-box p:first-child {
     padding-top: 0pt;
}

.html-rtl .notification-box h2 {
    padding-left: 0;
    background-position: top right;
}

.notification-box:before {
    content: "\00a0";
    width: 32px;
    height: 32px;
    display: block;
    left: 10px;
    top: 50%;
    margin-top: -16px;
    position: absolute;
    background-image:url(../../img/zamboni/notifications.png);
}

.html-rtl .notification-box:before {
    right: 10px;
    left: auto;
}

.notification-box.warning {
    background-color: #FD9;
    color: #444;
    border: 3px solid #550b00;
}

.notification-box.warning:before {
    background-position: 0 -225px;
}

.notification-box.error {
    background-color: #FFA5A5;
    color: #444;
    border: 3px solid #550b00;
}

.notification-box.error:before {
    background-position: 0 -83px;
}

.notification-box.error h2 {
    color: #C63717;
    background-position: 0 -150px;
}

.notification-box.info {
    color: #444;
    border: 3px solid #002955;
}

.notification-box.info:before {
    background-position: 0 -435px;
}

.notification-box.info h2 {
    color: #425A8B;
    background-position: 0 -150px;
}

.html-rtl .notification-box {
    padding: 13px 58px 13px 13px;
}

.notification-box h2 {
    background: none;
    font-weight: bold;
    padding: 0;
    font-family: "helvetica neue", arial, helvetica, sans-serif;
    font-size: 13px;
    line-height: 1;
    min-height: 0;
}

.notification-box p {
    margin: 0;
}

/** Add-on detail page buttons. **/
#addon-summary .install-shell .install {
    float: left;
    clear: both;
}

.html-rtl #addon-summary .install-shell .install {
    float: right;
}

#addon-summary .install-shell .notavail {
    clear: both;
}

.install-wrapper {
    margin-bottom: 1.5em;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.install-shell {
    display:inline-block;
}

.install-wrapper .warning {
    clear: both;
    padding: 0 4px;
    margin: 0;
}

.privacy-policy {
    display: inline-block;
}

.privacy-policy ul,
.policy-statement ul {
    list-style: disc outside none;
    margin: 0 0 0 20px;
}

.privacy-policy ol,
.policy-statement ol {
    list-style: decimal outside none;
    margin: 0 0 0 20px;
}

.privacy-policy blockquote,
.policy-statement blockquote {
    margin-bottom: 0;
}

.install-wrapper .extra {
    border-top: 1px dotted #A5C9D5;
    padding-top: 6px;
}

/* Contributions */
#contribution.notification .aux {
}

#contribution .aux .button-wrapper {
    padding-bottom: 10px;
}

#contribution h2 span {
    top: 0;
}

#developers #contribution .aux {
    width: 25%;
    text-align: right;
    float: right;
}

#developers #contribution .button-wrapper {
    float: none;
    padding: 10px 0 5px;
}

#developers #contribution h3 {
    width: 75%;
    float: left;
}

#developers #contribution h3.show-install {
    float: none;
    margin: 0;
    width: 100%;
}

#developers #contribution .aux-bottom {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px dashed #E0EFFD;
}

#developers #contribution .aux-bottom .button-wrapper {
    float: left;
    padding: 0;
    width: 60%;
}

#developers .notification .continue,
#developers .install,
#developers .install_shell,
#developers .aux-bottom #contribute-button {
    float: left;
}

#developers .show-install h3 {
    margin: 0;
}

/* Disable styling for stacked .extras. */
.install-wrapper .extra + .extra {
    border: none;
    padding: 0;
}

.install-wrapper.lite .extra,
.install-wrapper.unreviewed .extra {
    border-top: 1px dotted #AA7700;
}

.install-wrapper.lite .install strong,
.install-wrapper.unreviewed .install strong {
    display: none;
}

.install-wrapper.lite .install-note strong,
.install-wrapper.unreviewed .install-note strong {
    display: inherit;
}

.install-wrapper.lite,
.install-wrapper.unreviewed {
    padding: 0.4em;
}

.install-wrapper.lite,
.install-wrapper.unreviewed {
    background: #FFE57F;
}

.aux .button-wrapper {
    float: left;
    margin: 0;
    padding: 0.1em 0 1.5em;
}

/** Add-on listing on the homepage. */
.listing.compact .item blockquote {
    padding: 0;
}

.listing.compact .item .install-shell,
.listing.compact .item .install {
    float: right;
    margin-left: 10px;
}

.html-rtl .listing.compact .item .install-shell,
.html-rtl .listing.compact .item .install {
    float: left;
    margin-left: 0;
    margin-right: 10px;
}

.listing.compact .item h3 {
    float: none;
}

td .addon-rating,
.listing.compact .item .meta .addon-rating,
.listing.compact .item .meta .downloads,
.listing.compact .item .meta .updated {
    display: inline;
}

.listing.compact .item blockquote {
    clear: both;
}

#discovery-modules .ordering input {
    width: 2em;
}

#discovery-modules .module {
    font-weight: bold;
}

#discovery-modules .locales input {
    width: 20em;
}

/* Carousel arrows for personas carousel */

.personas-home ol.breadcrumbs {
    clear:none; /*don't want breadcrumbs clearing floats in this module*/
}

.arrow {
    display: block;
    float: right;
    width: 24px;
    height: 24px;
    border: 1px solid #7fcbd8;
    -moz-border-radius: 13px;
    cursor: pointer;
    text-indent: -999px;
    background: white;
    position: absolute;
    right: 99px;
    overflow: hidden;
}

.html-rtl .arrow {
    right: auto;
    left: 99px;
}

.arrow.prev {
    top: 11px;
}

.arrow.next {
    top: 304px;
}

.arrow:before {
    content: "\00a0";
    display: block; /* reduce the damage in FF3.0 */
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-style: solid;
}

.arrow.prev:before {
    left: 6px;
    top: 2px;
    border-bottom-color: #0471ed;
}

.arrow.next:before {
    left: 6px;
    top: 9px;
    border-top-color: #0471ed;
}

.other-note {
    display: none;
    clear: left;
    padding: .25em 0 0 1em;
    margin: 0;
}
.other-note input[type='text'] {
    width: 150px;
}
.other-note input[type='submit'] {
    margin-top: -2px;
}
.other .other-note,
.review-reason a {
    display: block;
}

/** Reviews *********/

ul.review-options {
    float: right;
    font-size: .9em;
    margin-top: 1em;
    margin-bottom: 2px;
    color: #aaa;
}
ul.review-options > li {
    float: left;
}
.review ul.review-options > li > a {
    font-weight: normal;
    color: #aaa;
    -moz-transition: color .2s;
    -webkit-transition: color .2s;
    transition: color .2s;
}
ul.review-options > li:not(:first-child) {
    list-style-type: disc;
    margin-left: 1.6em;
}
.article.review {
    margin-bottom: 1em;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    overflow: visible;
}
.review h5 {
    float: left;
    margin-right: .8em;
    font-size: 120%;
}
.html-rtl .review h5 {
    float: right;
    margin-right: inherit;
    margin-left: .8em;
}
.review p {
    margin: 1em 0 0 0;
}
.review .reviewed-on {
    clear: left;
    font-size: .9em;
}
.html-rtl .review .reviewed-on {
    clear: right;
}
.review.deleted {
    display: none;
}
h6.author, .author a {
    font-weight: normal;
}
.reviews .highlight > span {
    display: block;
}
.reviews .highlight hgroup {
    display: block;
    margin-bottom: 1em;
}
.reviews .highlight > div {
    margin: 0;
    padding: 1em .2em;
    border-top: 1px dashed #ccc;
    font-size: .9em;
}
.reviews .highlight > div:last-child {
    text-align: center;
    padding-bottom: 0;
}

.average_rating {
    margin: 0 .2em;
}

.average_rating .stars {
    margin-right: .9em;
}

.article .review-detail .show-more {
    font-weight: normal;
    float: right;
}

/* grouped ratings style */

.grouped_ratings .rating_bar {
    border-left: 1px solid black;
    height: 2em;
    float: left;
    width: 0px;
    overflow: visible;
    width: 120px;
}
.num_ratings {
    width: 1px;
    position: absolute;
    right: -4px;
    top: -2px;
    line-height: 1em;
}
.grouped_ratings .rating_bar span.bar {
    display:block;
    height: 100%;
    position: relative;
    background: #acd;
    margin: .4em .5em 0 0;
    height: .9em;
}

.html-rtl .grouped_ratings .rating_bar {
    border-left: 0;
    border-right: 1px solid black;
    float: right;
}

.html-rtl .grouped_ratings .rating_bar span.bar {
    float: right;
    margin: .4em 0 0 .5em;
}

.html-rtl .grouped_ratings .rating_bar span.num_ratings {
    right: auto;
    left: -4px;
}


/* stacking the stars to the right for the grouped ratings */

.grouped_ratings .stars-4 {
    background-position: 13px 50%;
}
.grouped_ratings .stars-3 {
    background-position: 26px 50%;
}
.grouped_ratings .stars-2 {
    background-position: 39px 50%;
}
.grouped_ratings .stars-1 {
    background-position: 52px 50%;
}
.grouped_ratings .stars-0 {
    background-position: 65px 50%;
}

/* review form */

#review-box form {
    width: 48%;
    float: left;
    padding: 0 10px 1em 0;
    margin-right: 1em;
    margin-bottom: 0;
}

#review-box input {
  box-sizing: border-box;
  width: 100%;
}

#review-box textarea {
    margin-bottom: 1em;
    height: 100px;
}

#review-box div {
    padding-left: 48%;
}

.review-form p > label {
    float: left;
    width: 8em;
}

#review-form {
    margin: 2em 1em 0 1em;
}

.review-form textarea {
    margin: 1em 0 1em 0;
    clear: left;
}

.review-form .ratingwidget {
    float: left;
    margin-bottom:0;
}

.review-form input[type='text'] {
    width: 15em;
}

.ratingwidget input {
    display: none;
}

.ratingwidget {
    display: block;
    float: none;
    width: 65px;
    margin-bottom: 1em;
}

.ratingwidget label {
    text-indent: -5000px;
    display: block;
    float: left;
    width: 13px;
}

.review:hover ul.review-options > li > a {
    color: #3d6db5;
}
.review-wrapper {
    position: relative;
}
.reviews header {
    margin-left: 0;
}
.highlight h5 {
    font-size: 120%;
}
.review.reply {
    margin-left: 4em;
    background: #f0f6f2;
    border-color: #d0e2c5;
}
.review .review-note {
    float: left;
    font-size: .9em;
    margin-top: 1em;
    margin-bottom: 2px;
    font-style: italic;
}

.review.reply-form {
    background: #e0effd;
    border: 0;
}
.reply-form form {
    margin-bottom: 0;
}
.reply-form label {
    display: block;
    margin-top: 1em;
}
label > .optional {
    font-weight: normal;
    color: #888;
}
.reply-form textarea {
    margin-bottom: 2em;
    width: 80%;
}
.reply-form h3 {
    margin: 0;
}
.reply-form input[type='text'] {
    width: 60%;
}

.collection-add {
    left: -42px;
}

.collection-add-dropdown, .collection-rate-dropdown {
    margin: 0;
    display: none;
    width: 200px;
    padding: 1em;
}

.collection-rate-dropdown {
    margin-top:1em;
}

.upvote .collection-rate-dropdown {
    left: -56px;
}

.downvote .collection-rate-dropdown {
    left: inherit;
    right: -76px;
}

.popup h3 {
    margin-top: 0;
}
#add-to-collection form {
    margin-bottom: 0;
}
#add-to-collection #id_description {
    height: 6em;
}

.edit_with_prefix span, .edit_with_suffix span {
    border: 1px solid #5875A0;
    background: #eee;
    color: #888;
}
.edit_with_prefix input:focus, .edit_with_suffix input:focus {
    outline: 0;
}

/* Redundant [type=text] selector to override django admin styles
 * with higher specificity
 */
.edit_with_prefix span {
    border-right: 0 none;
    padding: 2px 2px 2px 5px;
}
.edit_with_prefix input, .edit_with_prefix input[type=text] {
    border: 1px solid #5875a0;
    border-left: 0 none;
}

.edit_with_suffix span {
    border-left: 0 none;
    padding: 2px 5px 2px 2px;
}

.edit_with_suffix input {
    border-right: 0 none;
}

.edit_initially_hidden {
    display: none;
}

#slug_value {
    font-weight: bold;
    color: #222;
}

#collection-form-slug,
#clear-recents {
    font-size: .9em;
}

#collection-favorites-opts li {
    display: inline-block;
    margin-right: 1em;
}

.collections-details #id_name {
    display: block;
    -moz-box-sizing: border-box;
    width: 100%;
}

#collection_listed {
    margin-bottom: 1.5em;
}

#collection_listed ul label {
    font-weight: normal;
}

#icon_upload {
  padding-top: 5px;
}

#icon_upload .icon_preview  {
  float: left;
  text-align: center;
  margin-right: 10px;
  line-height: 1em;
}

#icon_upload .icon_preview img {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #C1E0EA;
  padding: 8px;
  width: 32px;
  height: 32px;
  display: block;
}

#ajax_collections_list {
    margin: 0 0 .5em 0;
}

#ajax_new_collection {
    border-top: 1px dashed #aecfda;
    padding: .5em 0 0 30px;
    margin: 0;
}

#ajax_collections_list li {
    cursor: pointer;
    padding-left: 30px;
    background-repeat: no-repeat;
    background-position: 0 4px;
    background-image: url(../../img/zamboni/icons/checks.png);
}

#ajax_collections_list li:hover {
    background-position: 0 -36px;
}

#ajax_collections_list li.selected {
    background-position: 0 -76px;
}

#ajax_collections_list li.ajax-loading {
   background-image: url(../../img/zamboni/loading-white.gif);
   background-position: left bottom;
}

.collections-contributors tr a {
    display: none;
}

.collections-contributors tr:hover a {
    display: inline;
}

.featured .meta {
    margin-top: 0;
}

.featured .meta ul {
    margin: 0;
}

.meta li {
    line-height: 2em;
}

.followers {
    color: #37a632;
}
.followers span {
    font-weight: bold;
}

.listing-footer .delete {
    float: right;
    color: red;
}
.html-rtl .listing-footer .delete {float: left;}

.tab-wrapper .content {
    margin: 1em;
}

.tab-wrapper .listing-footer {
    padding-top: .5em;
    z-index: 0;
}

.tab-wrapper .content h3 {
    display: none;
}

.tab-wrapper .content p {
    margin-top: 2em;
}

input:-moz-placeholder {
    color: #ccc;
}
input::-webkit-placeholder {
    color: #ccc;
}

table#addons-list, table#contributors-list {
    width: 100%;
}
#addons-list .comments {
    display: none;
    margin: 0 0 .2em 42px;
}
#addons-list .comments.hascomment {
    display: block;
}
#addons-list .comments.hascomment textarea {
    resize:vertical;
}
td.remove {
    width: 20px;
    text-align:center;
}
#addons-list thead,
#contributors-list thead {
    font-size: .9em;
}
#addons-list tbody tr,
#contributors-list tbody tr {
    border-top: 1px dotted #A5BFCE;
}
#addons-list tbody tr:hover,
#contributors-list tbody tr:hover,
.ui-state-hover {
    background-color: #e4f5fb;
}
td.input {
    background: #E0EFFD;
    padding-top: .5em;
    padding-bottom: .4em;
}
#addons-list h3 {
    line-height: 36px;
    display: inline;
    margin: 0;
    padding: 0;
}
#addons-list img {
    float: left;
    margin: 2px 1em 0 0;
}
#id_name {
    display: block;
}
#addons-list a.remove,
#addons-list a.comment,
#contributors-list a.remove {
    text-decoration: none;
    cursor: pointer;
    display: block;
    width: 16px;
    height: 16px;
    margin: 10px;
    text-indent: -9000px;
    background-repeat: no-repeat;
    background-image: url(../../img/zamboni/icons/collections.png);
}
#addons-list a.remove,
#contributors-list a.remove {
    background-position: 0 -250px;
}
#addons-list a.remove:hover,
#contributors-list a.remove:hover,
.collection-admin a.delete {
    background-position: 0 -200px;
}
#addons-list a.comment {
    background-position: 0 -800px;
}

.collection-admin {
    font-weight: bold;
    padding: .5em 1em;
    margin-bottom: 0;
    display: inline-block;
}
.collection-admin a {
    background-repeat: no-repeat;
    background-image: url(../../img/zamboni/icons/collections.png);
    margin-left: 1em;
    white-space: nowrap;
    padding-left: 22px;
}
.collection-admin a.edit {
    background-position: 0 -300px;
}
.collection-create .featured-inner {
    padding: 1em;
}

/* Hide this honeypot field for our users */
.collection-create input[name="your_name"],
#details-edit input[name="your_name"] {
    display: none;
}

.contributor span {
    position: relative;
}
#contributor-ac-error {
    margin: 0;
}
.make-owner {
    margin-left: 1em;
}


/* collections landing module */
.collections-landing {
    padding: 1em;
    min-height: 190px;
    background-image: url(../../img/illustrations/logo-collections-220x270.png),
                      linear-gradient(#e4f5fb, #ffffff);
    background-repeat: no-repeat;
    background-position: 95% 30px, left top;
}

.collections-landing p {
    font-size: 1.4em;
    padding-right: 250px;
    max-width: 450px;
    line-height: 1.25em;
}

.collections-landing .breadcrumbs {
   margin-bottom: 4px;
}

.collections-landing h2 {
   font-family: inherit;  /* this should be Meta eventually */
   font-size: 2.8em;
   font-weight: bold;
   margin-top: 0;
}

.html-rtl .collections-landing {
    background-position: 5% 20px, left top;
}
.html-rtl .collections-landing p {
    padding-right: 0;
    padding-left: 250px;
}


a.outlink {
    margin-left: 4px;
    background-repeat: no-repeat;
    background-image: url(../../img/zamboni/icons/collections.png);
    white-space: nowrap;
    padding-left: 16px;
    background-position: 0 -850px;
}
a.outlink:hover {
    background-position: 0 -900px;
}


/* Widgets! they're just fancy <a> tags donchaknow */
.collection_widgets {
    margin-top: .5em;
}

.collection_widgets .condensed {
    margin-right: 4px;
}

.object-details .collection_widgets {
    margin-bottom: 1em;
}
.widget {
    background-image: url(../../img/zamboni/icons/collections.png);
    background-repeat: no-repeat;
    padding-left: 22px;
    margin-right: 7px;
    height: 16px;
    line-height: 16px;
}
.html-rtl .widget {
    margin-right: 0;
    margin-left: 1em;
}
.widget.condensed {
    margin-right: 8px;
    padding-left: 16px;
    width: 16px;
}
.html-rtl .widget.condensed {
    margin-left: .8em;
}
#addon .widgets {
    clear:left;
}
#addon .widget {
    display: block;
    margin-bottom: 1em;
    float: left;
}
.html-rtl #addon .widget {
    float: right;
}

.widget.edit { background-position: 0 -350px; }
.widget.edit:hover { background-position: 0 -300px; }
.widget.copy { background-position: 0 -50px; }
.widget.copy:hover { background-position: 0 0px; }
.widget.watch { background-position: 0 -750px; }
.widget.watch:hover { background-position: 0 -700px;}
.widget.watching { background-position: 0 -650px; }
.widget.favorite { background-position: 0 -500px; }
.widget.favorite:hover { background-position: 0 -450px; }
.widget.favorite.faved { background-position: 0 -400px; }
.widget.condensed.collection { background-position: 0 -150px; }
.widget.collection, .widget.condensed.collection:hover { background-position: 0 -100px;}
.widget.condensed.share { background-position: 0 -600px; }
.widget.share, .widget.condensed.share:hover { background-position: 0 -550px; }

.widgets .widget.ajax-loading,
.widgets .widget:hover.ajax-loading,
input.ui-autocomplete-loading,
.modal.ajax-loading,
.tooltip.ajax-loading,
.tooltip:hover.ajax-loading {
   background-image: url(../../img/zamboni/loading-white.gif);
   background-repeat: no-repeat;
   background-position: left bottom;
}
input.ui-autocomplete-loading {
    background-position: right center;
}
.modal.ajax-loading {
    background-position: center center;
}

.modal-actions.ajax-loading {
    background-image: url(../../img/zamboni/loading-white.gif);
    background-repeat: no-repeat;
    background-position: right center;
}

.suggested-amount.ajax-loading,
#contribute-box .ajax-loading {
    background-image: url(../../img/zamboni/loading-white.gif);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 30px;
}

#contribute-box .ajax-loading {
    margin-left: 0px;
    font-weight: bold;
}

#popup-staging .popup {
    display: none;
}

/** Add-on detail page QR Code area. Feature test from Bug 595561 **/
#addon-qr-code {
    -moz-border-radius: 5px;
    background-color: #e0effd;
    border: 6px solid #e0effd;
    color: #223355;
    float: right;
    font-size: 0.9em;
    margin-left: 0.5em;
    width: 172px;
}

.html-rtl #addon-qr-code {
    float: left;
    margin-left: 0;
    margin-right: 0.5em;
}

/** Hide Featured tab on Search Tools landing page when there's a category **/
/** Bug 605670, 609318 **/
.search-tools-for-cat li a[href*="?sort=featured"] {
    display: none;
}
/** l10n */
#l10n-menu {
    float: right;
}
#l10n-menu p {
    margin: 0;
}
.html-rtl #l10n-menu {
    float: left;
}
#change-locale {
    padding-right: 16px;
}
#change-locale:after {
    position: relative;
    top: 12px;
    left: 4px;
    content: "\00a0";
    display: inline-block; /* reduce the damage in FF3.0 */
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-style: solid;
    border-top-color: #003595;
}
#locale-popup:after {
  right: 53px;
}
#locale-popup:before {
  right: 48px;
}
#locale-popup section {
  display: block;
  height: 300px;
  line-height: 30px;
  margin-right: -10px;
  overflow-y: auto;
}
#locale-popup section a {
  display: block;
}
#locale-popup section a:hover {
  background-color: #eefafe;
  text-decoration: none;
}
#locale-popup section a em {
  color: #98bfef;
}
#locale-popup section ul {
  margin: 0;
}
#existing_locales a.remove {
  display: block;
  float: right;
  margin: 4px 8px;
  line-height: 18px;
}
#existing_locales a.remove:hover {
  background-color: #2a4364;
}

.trans [lang] {
    display: none;
}
.trans [lang]:first-child {
    display: block;
}
.trans .init-trans {
    display: none;
}

.trans .cloned {
    color: #ccc;
    font-style: italic;
}
/* end l10n */

/** "Some HTML/Markdown Allowed" text/popup **/
.syntax-support {
    font-size: .9em;
    color: #003595;
    float: right;
}

.html-rtl .syntax-support {
    float: left;
}

.syntax-support:hover {
    color: #000;
    cursor: help;
}

.errorlist .l10n {
    cursor: pointer;
}
.errorlist .l10n:hover {
    text-decoration: underline;
}

#requires-restart {
    margin: -1em 0 1.5em 0;
}

#requires-restart-msg {
    border: 1px solid #b6d9e5;
    border-radius: 3px; /* Only shown in Fx4. */
    padding: .2em .4em;
    color: #294473;
    font-weight: bold;
    font-size: .9em;
}

#navbar {
    display: none;
}

#paypal-error {
    background: white url("../../img/zamboni/notification-error.png") no-repeat 5px;
    padding-left: 50px;
}

#contribute-box {
    position: fixed;
    left: 50%;
}

#contribute-box .error {
    padding: 10px 0px 10px 50px;
}

ul.errorlist li progress {
    margin-left: 1em;
}

ul.errorlist li.strength {
    color: #444444;
}

.generic-content {
    margin: 0 auto;
    padding: 0 10px;
    max-width: 960px;
}


#dev-survey-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 54px;
    background-color: #D6FFCD;
}

#dev-survey-banner * {
    font-size: 16px;
    color: #000;
}

#dev-survey-banner .survey-link {
    text-decoration: underline;
    font-weight: bold;
}

#dev-survey-banner .survey-dismiss {
    position: absolute;
    text-decoration: none;
    padding: 20px;
    right: 0px;
}
